<!-- SearchComponent.vue -->
<template>
    <div class="search-container">
        <input type="text"
               v-model="searchQuery"
               placeholder="请输入项目名称/国标"
               @input="handleSearch" />
        <button @click="handleSearch">搜 索</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                searchQuery: '', // 绑定到输入框的值
            };
        },
        methods: {
            handleSearch() {
                // 当用户输入或点击搜索按钮时触发的搜索逻辑
                console.log('Searching for:', this.searchQuery);
                // 这里可以添加实际的搜索逻辑，比如调用API
            },
        },
    };
</script>

<style scoped>
    .search-container {
        /* 添加一些样式 */
        display: flex;
        align-items: center;
        margin: 20px;
    }

        .search-container input {
            margin-right: 10px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 600px;
            height: 40px;
            font-size: 15px;
        }

        .search-container button {
            padding: 11px 15px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            width: 100px;
            font-size: 16px;
        }

            .search-container button:hover {
                background-color: #0056b3;
            }
</style>
